@use "sass:color";

@import "../../../components/src/styles/colors.scss";
@import "../../../components/src/styles/variables.scss";
@import "../../../components/src/styles/typography.scss";
@import "../../../components/src/styles/util.scss";
@import "../../../components/src/styles/mixins.scss";

@import "../../../components/src/CodeSnippet/code-snippet.scss";
@import "../../../components/src/ExpandableToggle/ExpandableToggle.scss";

@import "../../../components/src/LabeledSwitch/LabeledSwitch.scss";
@import "../../../components/src/IndicatorSources/IndicatorSources.scss";
@import "../../../components/src/IndicatorProcessing/IndicatorProcessing.scss";

@import "./typography.scss";

// grapher frame
$frame-color: $gray-10;

// text
$dark-text: $gray-80;
$light-text: $gray-70;
$active-text: $blue-90;

// These should be between 0–100 in order to avoid conflicting with
// site dropdowns, search overlays, etc.
$zindex-chart: 1;
$zindex-table: 1;
$zindex-global-entity-select: 11;
$zindex-Tooltip: 20;
$zindex-modal: 30;

$zindex-full-screen: 120;
$zindex-controls-backdrop: 130;
$zindex-controls-popup: 140;
$zindex-controls-drawer: 150;

// needed for .global-entity-control-container
@mixin xxlg-down {
    @media only screen and (max-width: $xxlg) {
        @content;
    }
}

// All styles are scoped to GrapherComponent only, to prevent rule leaking
// and low-specificity rules from the site CSS trumping these ones.
// You can use sass's "&" syntax at the top level of one of these files
// if you want to write a rule that requires .GrapherComponent to have a second class.
// e.g. &.narrow is equivalent to .GrapherComponent.narrow
.GrapherComponent {
    @import "../controls/CommandPalette.scss";
    @import "../controls/Controls.scss";
    @import "../controls/SettingsMenu.scss";
    @import "../controls/MapRegionDropdown.scss";
    @import "../captionedChart/CaptionedChart.scss";
    @import "../timeline/TimelineComponent.scss";
    @import "../controls/ContentSwitchers.scss";
    @import "../controls/ActionButtons.scss";
    @import "../controls/ShareMenu.scss";
    @import "../modal/Modal.scss";
    @import "../modal/EmbedModal.scss";
    @import "../modal/DownloadModal.scss";
    @import "../entitySelector/EntitySelector.scss";
    @import "../dataTable/DataTable.scss";
    @import "../modal/SourcesModal.scss";
    @import "../tooltip/Tooltip.scss";
    @import "../mapCharts/MapTooltip.scss";
    @import "../footer/Footer.scss";
    @import "../header/Header.scss";
    @import "../modal/SourcesKeyDataTable.scss";
    @import "../modal/SourcesDescriptions.scss";
    @import "../tabs/Tabs.scss";
    @import "../tabs/TabsWithDropdown.scss";
    @import "../slideInDrawer/SlideInDrawer.scss";
    @import "../sidePanel/SidePanel.scss";
    @import "../scatterCharts/NoDataSection.scss";
    @import "../mapCharts/MapChart.scss";
    @import "../controls/SearchField.scss";
    @import "../controls/DataTableSearchField.scss";
}

// These rules are currently used elsewhere in the site. e.g. Explorers
// so we can't scope them to be grapher-only
@import "../controls/entityPicker/EntityPicker.scss";
@import "../controls/globalEntitySelector/GlobalEntitySelector.scss";
@import "../fullScreen/FullScreen.scss";
@import "../../../components/src/Checkbox.scss";
@import "../../../components/src/RadioButton.scss";
@import "../../../components/src/loadingIndicator/LoadingIndicator.scss";

@import "../../../components/src/closeButton/CloseButton.scss";
@import "../../../components/src/OverlayHeader.scss";

@import "../controls/Dropdown.scss";
@import "../controls/MapZoomDropdown.scss";
@import "../controls/DataTableFilterDropdown.scss";

.grapher_dark {
    color: $dark-text;
}

.grapher_light {
    color: $light-text;
}

.GrapherComponent,
.GrapherComponent h2,
.GrapherComponent p,
.GrapherComponent ul,
.GrapherComponent ol {
    font-family: $sans-serif-font-stack;
}

.GrapherComponent {
    display: inline-block;
    text-align: left;

    line-height: 1em;

    background: white;
    color: $gray-80;

    position: relative;
    container-type: size;
    container-name: grapher;

    border: 1px solid $frame-color;
    z-index: $zindex-chart;

    * {
        box-sizing: border-box;
    }

    button {
        background: none;
    }

    .clickable {
        cursor: pointer;

        a {
            text-decoration: none;
            &:visited {
                color: initial;
            }
        }
    }

    input[type="checkbox"] {
        cursor: pointer;
    }

    .DataTableContainer {
        z-index: $zindex-table;
    }

    .CaptionedChartAndSidePanel {
        display: flex;
        height: 100%;
    }

    // customize css of the <CodeSnippet> component
    .wp-code-snippet {
        --code-snippet-border: #{$gray-20};
        --code-snippet-background-light: #{$gray-5};
        --code-snippet-text: #{$gray-70};
        --code-snippet-button: #{$gray-80};
        --code-snippet-button-hover: #{$gray-70};
        --code-snippet-button-active: #{$gray-70};

        margin-bottom: 0 !important;
    }

    &.GrapherComponentNarrow {
        .wp-code-snippet {
            padding: 16px;
        }
    }
}

.GrapherComponent.isStatic {
    border: none;
}

.GrapherComponent.isExportingToSvgOrPng {
    padding: 0 !important;
}

.Tooltip {
    z-index: $zindex-Tooltip;
}

// white background tooltip for longer explanations
// (the `--short` version has a little less padding)
.tippy-box[data-theme="grapher-explanation"],
.tippy-box[data-theme="grapher-explanation--short"] {
    background: white;
    color: $gray-80;
    font: 400 14px/1.5 $sans-serif-font-stack;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);

    .tippy-arrow {
        color: white;
    }
}
.tippy-box[data-theme="grapher-explanation"] {
    .tippy-content {
        padding: 15px;
    }
}

.tippy-box[data-theme="grapher-dark"] {
    background-color: $gray-90;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
    padding: 8px;

    .tippy-content {
        padding: 0;
    }

    .tippy-arrow {
        color: $gray-90;
    }
}

.markdown-text-wrap__line {
    display: block;
}

.markdown-text-wrap {
    a,
    a:visited {
        color: #666;
        text-decoration: underline;
    }
    a:hover {
        color: color.adjust(#666, $lightness: -10%);
    }

    // needed so DoD border-bottom doesn't clip
    .markdown-text-wrap__line:last-child {
        margin-bottom: 2px;
    }

    .dod-span {
        @include dod-span;
    }
}

.dod-container {
    @include dod-container;
}
